iT邦幫忙

2023 iThome 鐵人賽

DAY 10
0

今天突然想分享一些東西

其實分享到現在可能會有人覺得很枯燥,這些東西在工作上不一定用得到,能不能講一些實際常常會用到的test或者hook,我會這樣以基礎的來講,是因為在工作上常常會碰到不同的情形,我沒辦法模擬每個情況,但是可以根據我們之前有學到的test裡的技巧放進去,最後能自己寫出來才是最重要

廢話不多說,就來寫useTimeout吧

import { useEffect, useRef } from "react";

// Custom Hook
export function useTimeout(callback: () => void, delay: number | null) {
  const savedCallback = useRef<() => void>();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function fn() {
      if (savedCallback.current) {
        savedCallback.current();
      }
    }
    if (delay !== null) {
      const id = setTimeout(fn, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
}

我使用 useRef 來保存 callback 來確保總是使用最新版本的 callback 的方法,不管 useEffect 的依賴如何變化。 useTimeout 內部總是執行最新 callback ,比較不會有閉包問題


上一篇
[Day 9] 寫useWindowSize測試
下一篇
[Day 11] useTimeout 的測試
系列文
React進階班,用typescript與jest製作自己的custom hooks庫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言